<template>
	<view class="content">
		<u-field required v-model="host" label="IP" placeholder="请输入ip地址">
		</u-field>
		<u-field required v-model="port" label="端口" placeholder="请输入端口号">
		</u-field>
		<view class="button-container">
			<u-button type="primary" class="sureBtn" :loading="showLoading" shape="circle"
				@click="setHost">确认</u-button>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				host: '',
				port: '',
				showLoading: false
			}
		},
		onShow() {
			console.log('进入界面')
			var ip = uni.getStorageSync("IP");
			var port = uni.getStorageSync("Port");
			if (ip && port) {
				this.host = ip;
				this.port = port;
			}
		},
		methods: {
			setHost() {
				var ip = this.host;
				var port = this.port;
				if (!this.$Util.isValidIp(ip) || !this.$Util.isValidPort(port)) {
					this.$u.toast('ip或端口错误');
					return;
				}
				this.showLoading = true;

				uni.setStorageSync("IP", ip);
				uni.setStorageSync("Port", port);
				
				this.$request('User/Test').then(res => {
					console.log(res)
					if (res == 'Hello') {
						this.$u.toast("设置成功");
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else {
						this.$u.toast("请输入正确的ip和端口");
					}
					this.showLoading = false;
				}).catch(error => {
					console.log(error)
					this.$u.toast(error.message)
					this.showLoading = false;
					return;
				})
			}
		}

	}
</script>

<style>
	.content {
		padding: 30rpx;
	}

	.button-container {
		position: fixed;
		bottom: 200rpx;
		width: 90%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 10rpx;
	}

	.sureBtn {
		width: 90%;
	}
</style>